const gulp = require('gulp');

const babel = require('gulp-babel'); // 语法转换
const concat = require('gulp-concat'); // 合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass') // scc编译
const htmlmin = require('gulp-htmlmin'); //html压缩
const autoprefixer = require('gulp-autoprefixer')

const connect = require('gulp-connect'); // 服务
const imagemin = require('gulp-imagemin') // 图片压缩
const del = require('del') // 清空目录
const minifyCSS = require('gulp-clean-css') //css压缩
const sourcemaps = require('gulp-sourcemaps');
const rev = require('gulp-rev-dxb');
const revCollector = require('gulp-rev-collector-dxb');

// es6语法转换 js压缩 md5命名
gulp.task('js', async (e) => {
  let stm = gulp.src('src/js/*.js', { sourcemaps: true })
    // .pipe(babel({
    //   presets: ['env']
    // }))
    // .pipe(uglify({
    //   mangle: true,
    //   compress: true
    // }))
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    .pipe(rev.manifest())            //生成rev-mainfest.json文件作为记录  
    .pipe(gulp.dest('dist/rev/js'))
    .pipe(connect.reload())
  return stm
});

// scss编译成css
gulp.task("scss", async (e) => {
  let stm = await gulp.src('src/scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['last 3 versions', 'Android >= 4.0'] }))
    .pipe(minifyCSS({ keepBreaks: true }))
    .pipe(rev())
    .pipe(sourcemaps.write('../map'))
    .pipe(gulp.dest('dist/css'))

    .pipe(rev.manifest())            //生成rev-mainfest.json文件作为记录  
    .pipe(gulp.dest('dist/rev/css'))

    .pipe(connect.reload())

  return stm
});

// scc合并压缩
// gulp.task("css", async() => {
//     await gulp.src(['./src/css/index.css', './src/css/base.css'])
//               .pipe(concat('index.css'))
//               .pipe(minifyCSS({keepBreaks:true}))
//               .pipe(gulp.dest('./dist/css'))
//               .pipe(connect.reload())
//   })
// 压缩图片
gulp.task('img', () => {
  return gulp.src('./src/imgs/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/imgs'))
    .pipe(connect.reload())
})

// html压缩
gulp.task('html', async () => {
  await gulp.src(['src/rev/**/*.json', './src/*.html'])
    // .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(revCollector({
      replaceReved: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
});

gulp.task('clean', async () => {
  await del(['dist']);
})
//服务
gulp.task('connect', function () {
  return connect.server({
    root: "dist",
    host: "0.0.0.0",
    open:true,
    port: 80,
    livereload: true,
  });
});
//监视文件， 自动执行
gulp.task('myWatch', function () {
  gulp.watch('./src/scss/*.scss', gulp.series('scss'))
  // gulp.watch('./src/css/*.css', gulp.series('css'))
  gulp.watch('./src/js/*.js', gulp.series('js'))
  gulp.watch('./src/index.html', gulp.series('html'))
  gulp.watch('./src/imgs/*', gulp.series('img'))
})
//启动开发环境 gulp.series是顺序执行 gulp.parallel是同步执行
gulp.task('start', gulp.series(gulp.parallel('myWatch', 'connect')));
// 构建项目 
gulp.task('dist', gulp.series('clean', gulp.parallel('img', 'scss', 'js'), 'html'));
